<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Open-Source Operating System for Smart Glasses | Mentra OS</title>
    <meta
      name="description"
      content="MentraOS is the open-source glasses platform powering camera, AI, apps, and developer freedom. Build smart glasses apps." />
    <style>
      /* Reset and Base Styles */
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        line-height: 1.6;
        color: #333;
      }

      img {
        max-width: 100%;
        height: auto;
      }

      button {
        cursor: pointer;
        border: none;
        background: none;
      }

      /* Container and Layout */
      .container {
        width: 100%;
        max-width: 1440px;
        margin: 0 auto;
        padding: 0 24px;
      }

      @media (min-width: 1024px) {
        .container {
          padding: 0;
        }
      }

      .flex {
        display: flex;
      }

      .flex-col {
        flex-direction: column;
      }

      .items-center {
        align-items: center;
      }

      .justify-center {
        justify-content: center;
      }

      .text-center {
        text-align: center;
      }

      .hidden {
        display: none;
      }

      @media (min-width: 1024px) {
        .lg\\:flex {
          display: flex;
        }
        .lg\\:flex-row {
          flex-direction: row;
        }
        .lg\\:block {
          display: block;
        }
        .lg\\:hidden {
          display: none;
        }
        .lg\\:text-left {
          text-align: left;
        }
      }

      /* Typography */
      .text-6xl {
        font-size: 3.85rem;
        line-height: 1;
      }

      .text-5xl {
        font-size: 4rem;
        line-height: 1;
      }

      .text-4xl {
        font-size: 2.25rem;
        line-height: 2.5rem;
      }

      .text-3xl {
        font-size: 1.875rem;
        line-height: 2.25rem;
      }

      .text-xl {
        font-size: 1.75rem;
        line-height: 1.75rem;
      }

      .text-lg {
        font-size: 1.125rem;
        line-height: 1.75rem;
      }

      @media (min-width: 1024px) {
        .lg\\:text-8xl {
          font-size: 6rem;
          line-height: 1;
        }
        .lg\\:text-7xl {
          font-size: 4.5rem;
          line-height: 1;
        }
        .lg\\:text-6xl {
          font-size: 3.75rem;
          line-height: 1;
        }
        .lg\\:text-4xl {
          font-size: 2.25rem;
          line-height: 2.5rem;
        }
        .lg\\:text-2xl {
          font-size: 1.5rem;
          line-height: 2rem;
        }
      }

      @media (min-width: 1280px) {
        .xl\\:text-9xl {
          font-size: 8rem;
          line-height: 1;
        }
        .xl\\:text-8xl {
          font-size: 6rem;
          line-height: 1;
        }
        .xl\\:text-7xl {
          font-size: 4.5rem;
          line-height: 1;
        }
        .xl\\:text-6xl {
          font-size: 3.75rem;
          line-height: 1;
        }
        .xl\\:text-5xl {
          font-size: 2.8rem;
          line-height: 1;
        }
        .xl\\:text-3xl {
          font-size: 1.875rem;
          line-height: 2.25rem;
        }
      }

      .font-bold {
        font-weight: 700;
      }

      .font-black {
        font-weight: 900;
      }

      .font-medium {
        font-weight: 500;
      }

      .leading-tight {
        line-height: 1.25;
      }

      .leading-relaxed {
        line-height: 1.625;
      }

      /* Colors */
      .text-green {
        color: #00b869;
      }

      .text-zinc-700 {
        color: #3f3f46;
      }

      .text-zinc-900 {
        color: #18181b;
      }

      .text-white {
        color: white;
      }

      .bg-gradient-green {
        background: linear-gradient(to bottom, #e6fff4, white, transparent);
      }

      .bg-gradient-dark {
        background: linear-gradient(to bottom, #18181b, #000);
      }

      .bg-gradient-light-green {
        background: linear-gradient(to bottom, #f0fdf4, #dcfce7);
      }

      .bg-zinc-900 {
        background-color: #18181b;
      }

      /* Spacing */
      .mb-2 {
        margin-bottom: 0.5rem;
      }
      .mb-3 {
        margin-bottom: 0.75rem;
      }
      .mb-4 {
        margin-bottom: 1rem;
      }
      .mb-6 {
        margin-bottom: 1.5rem;
      }
      .mb-8 {
        margin-bottom: 2rem;
      }
      .mb-12 {
        margin-bottom: 3rem;
      }

      .mt-4 {
        margin-top: 1rem;
      }
      .mt-6 {
        margin-top: 1.5rem;
      }
      .mt-8 {
        margin-top: 2rem;
      }
      .mt-12 {
        margin-top: 3rem;
      }

      .py-4 {
        padding-top: 1rem;
        padding-bottom: 1rem;
      }
      .py-6 {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
      }
      .py-8 {
        padding-top: 2rem;
        padding-bottom: 2rem;
      }
      .py-12 {
        padding-top: 3rem;
        padding-bottom: 3rem;
      }
      .py-16 {
        padding-top: 4rem;
        padding-bottom: 4rem;
      }

      .pt-4 {
        padding-top: 1rem;
      }
      .pt-6 {
        padding-top: 1.5rem;
      }
      .pt-8 {
        padding-top: 2rem;
      }
      .pt-12 {
        padding-top: 3rem;
      }
      .pt-24 {
        padding-top: 6rem;
      }

      .pb-4 {
        padding-bottom: 1rem;
      }
      .pb-8 {
        padding-bottom: 2rem;
      }
      .pb-12 {
        padding-bottom: 3rem;
      }

      @media (min-width: 1024px) {
        .lg\\:py-4 {
          padding-top: 1rem;
          padding-bottom: 1rem;
        }
        .lg\\:py-16 {
          padding-top: 4rem;
          padding-bottom: 4rem;
        }
        .lg\\:pt-32 {
          padding-top: 8rem;
        }
        .lg\\:pt-24 {
          padding-top: 6rem;
        }
      }

      /* Sections */
      .hero-section {
        background: linear-gradient(to bottom, #e6fff4, white, transparent);
        min-height: 70vh;
        padding-top: 100px;
      }

      @media (min-width: 1024px) {
        .hero-section {
          padding-top: 120px;
        }
      }

      .section-padding {
        padding: 2rem 0;
      }

      @media (min-width: 1024px) {
        .section-padding {
          padding: 4rem 0;
        }
      }

      /* Two Column Layout */
      .two-column {
        display: flex;
        flex-direction: column;
        gap: 3rem;
        align-items: center;
      }

      @media (min-width: 1024px) {
        .two-column {
          flex-direction: row;
          gap: 1.5rem;
        }
      }

      .two-column .left {
        width: 100%;
      }

      .two-column .right {
        width: 100%;
        display: flex;
        justify-content: center;
      }

      @media (min-width: 1024px) {
        .two-column .left {
          width: 50%;
          margin-left: auto;
        }
        .two-column .right {
          width: 40%;
          margin: 0 auto;
        }
      }

      /* App Store Badges */
      .app-badges {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        padding-top: 1rem;
      }

      .badge-row {
        display: flex;
        gap: 0.5rem;
        justify-content: center;
        flex-wrap: wrap;
        align-items: center;
      }

      @media (min-width: 640px) {
        .badge-row {
          gap: 0.75rem;
          flex-wrap: nowrap;
        }
      }

      .badge-row.center {
        justify-content: center;
      }

      /* Hero section should center badges */
      .hero-section .badge-row {
        justify-content: center;
      }

      @media (min-width: 1024px) {
        .badge-row:not(.center) {
          justify-content: flex-start;
        }

        /* Override for hero section */
        .hero-section .badge-row {
          justify-content: center;
        }
      }

      .app-badge {
        height: 2.5rem;
        width: auto;
        transition: transform 0.2s;
      }

      .app-badge:hover {
        transform: scale(1.05);
      }

      @media (min-width: 640px) {
        .app-badge {
          height: 3rem;
        }
      }

      @media (min-width: 1024px) {
        .app-badge {
          height: 3.5rem;
        }
      }

      /* Features Layout */
      .features-container {
        margin-top: 2rem;
      }

      .features-mobile {
        display: flex;
        flex-direction: column;
        gap: 2rem;
        margin: 0 1rem;
      }

      .features-desktop {
        display: none;
      }

      @media (min-width: 1024px) {
        .features-mobile {
          display: none;
        }
        .features-desktop {
          display: flex;
          align-items: flex-start;
          justify-content: center;
          gap: 5rem;
          max-width: 1400px;
          margin: 0 auto;
        }
      }

      .feature-item {
        display: flex;
        align-items: flex-start;
        gap: 1rem;
      }

      @media (min-width: 1024px) {
        .feature-item {
          flex: 1;
        }
      }

      .feature-icon {
        width: 3rem;
        height: 3rem;
        flex-shrink: 0;
        border-radius: 1rem;
        overflow: hidden;
        object-fit: cover;
      }

      @media (min-width: 1024px) {
        .feature-icon {
          width: 4rem;
          height: 4rem;
        }
      }

      @media (min-width: 1280px) {
        .feature-icon {
          width: 5rem;
          height: 5rem;
        }
      }

      .feature-content {
        flex: 1;
      }

      .feature-title {
        font-size: 1.25rem;
        font-weight: 600;
        color: #18181b;
        margin-bottom: 0.25rem;
        margin-top: 0.25rem;
      }

      @media (min-width: 1024px) {
        .feature-title {
          font-size: 1.25rem;
        }
      }

      @media (min-width: 1280px) {
        .feature-title {
          font-size: 1.5rem;
        }
      }

      .feature-description {
        color: #52525b;
        font-size: 1rem;
        line-height: 1.625;
      }

      @media (min-width: 1280px) {
        .feature-description {
          font-size: 1.125rem;
        }
      }

      /* Carousel */
      .carousel-container {
        position: relative;
        overflow: hidden;
      }

      .carousel-track {
        display: flex;
        transition: transform 0.3s ease;
      }

      .carousel-item {
        min-width: 100%;
        padding: 0 1rem;
      }

      .carousel-nav {
        display: flex;
        justify-content: center;
        gap: 0.5rem;
        margin-top: 1rem;
      }

      .carousel-dot {
        width: 0.75rem;
        height: 0.75rem;
        border-radius: 50%;
        background: #d1d5db;
        cursor: pointer;
        transition: background 0.2s;
      }

      .carousel-dot.active {
        background: #00b869;
      }

      /* FAQ Section */
      .faq-item {
        border-bottom: 1px solid #e5e7eb;
        padding: 1rem 0;
      }

      .faq-question {
        width: 100%;
        text-align: left;
        padding: 0.5rem 0;
        font-weight: normal;
        font-size: 1.125rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .faq-answer {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
        padding: 0 0.5rem;
      }

      .faq-answer.open {
        max-height: 200px;
        padding: 1rem 0.5rem;
      }

      /* Form Styles */
      .form-container {
        max-width: 28rem;
        margin: 0 auto;
      }

      .form-input {
        width: 100%;
        padding: 0.75rem 1rem;
        border: 1px solid #d1d5db;
        border-radius: 0.375rem;
        font-size: 1rem;
      }

      .form-button {
        width: 100%;
        padding: 0.75rem 1.5rem;
        background: #00b869;
        color: white;
        border-radius: 0.375rem;
        font-weight: 600;
        margin-top: 0.5rem;
        transition: background 0.2s;
      }

      .form-button:hover {
        background: #059669;
      }

      /* Video */
      .video-container {
        width: 100%;
        aspect-ratio: 16/9;
      }

      .video-container video {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      /* Mobile Adjustments */
      @media (max-width: 1023px) {
        .mobile-full-width {
          margin-left: -24px;
          margin-right: -24px;
        }
      }

      /* Responsive Image Sizing */
      .hero-phone {
        width: 100%;
        max-width: 300px;
      }

      .hero-glasses {
        width: 100%;
        max-width: 250px;
      }

      @media (min-width: 1024px) {
        .hero-phone {
          max-width: 370px;
        }
        .hero-glasses {
          max-width: 500px;
        }
      }

      /* Utility Classes */
      .rotate-neg-7 {
        transform: rotate(-7deg);
      }

      .scale-x-neg-1 {
        transform: scaleX(-1);
      }

      /* CTA Button */
      .cta-button {
        display: inline-block;
        background: #00b869;
        color: white;
        padding: 0.75rem 1.5rem;
        border-radius: 0.375rem;
        text-decoration: none;
        font-weight: 600;
        transition: background 0.2s;
      }

      .cta-button:hover {
        background: #059669;
      }

      /* Logo */
      .logo {
        position: absolute;
        top: 1rem;
        left: 1rem;
        z-index: 1000;
        width: 4rem;
        height: auto;
      }

      .logo svg {
        width: 100%;
        height: auto;
      }

      @media (min-width: 1024px) {
        .logo {
          top: 1.5rem;
          left: 1.5rem;
          width: 4rem;
        }
      }
    </style>
  </head>
  <body>
    <!-- Logo -->
    <div class="logo">
      <svg width="124" height="70" viewBox="0 0 124 70" fill="none" xmlns="http://www.w3.org/2000/svg">
        <g clipPath="url(#clip0_549_13)">
          <path d="M37.0746 37.5498H15V57.4296H37.0746V37.5498Z" fill="#222322" />
          <path d="M72.1021 57.4296L32.5938 32.8798V13L72.1021 37.5499V57.4296Z" fill="#222322" />
          <path d="M107.999 57.4296L68.4902 32.8798V13L107.999 37.5499V57.4296Z" fill="#222322" />
        </g>
        <defs>
          <clipPath id="clip0_549_13">
            <rect width="93" height="45" fill="white" transform="translate(15 13)" />
          </clipPath>
        </defs>
      </svg>
    </div>

    <!-- Hero Section -->
    <section class="hero-section">
      <div class="container">
        <div class="two-column" style="min-height: 500px">
          <div class="left">
            <h1 class="text-4xl lg:text-6xl xl:text-7xl font-bold leading-tight text-center lg:text-left mb-6">
              <span class="text-green font-black">MentraOS</span>是智能眼镜的开源操作系统。
            </h1>

            <p
              class="text-xl lg:text-2xl xl:text-3xl font-medium text-zinc-700 text-center lg:text-left leading-tight mb-6">
              获取智能眼镜应用。构建智能眼镜应用。
            </p>
            <!-- 
            <div class="app-badges">
              <div class="badge-row">
                <a
                  href="https://apps.apple.com/us/app/mentra-the-smart-glasses-app/id6747363193"
                  target="_blank"
                  rel="noopener noreferrer">
                  <img src="images/livetype.svg?v=1758968728" alt="在App Store下载" class="app-badge" />
                </a>
                <a
                  href="https://play.google.com/store/apps/details?id=com.mentra.mentra"
                  target="_blank"
                  rel="noopener noreferrer">
                  <img
                    src="images/Google_Play_Store_badge_EN_svg.png?v=1758968730"
                    alt="在Google Play获取"
                    class="app-badge" />
                </a>
                <a href="https://github.com/Mentra-Community/MentraOS" target="_blank" rel="noopener noreferrer">
                  <img src="images/get-it-on-github.png?v=1759512657" alt="在GitHub获取" class="app-badge" />
                </a>
              </div>
            </div>-->
          </div>

          <div class="right">
            <div class="relative">
              <img
                src="images/mentra_os_mobile_app_store.png?v=1760480599"
                alt="MentraOS智能眼镜应用商店"
                class="hero-phone" />
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Spacing -->
    <div class="py-6 lg:py-16"></div>

    <!-- Display Glasses Hero -->
    <section>
      <div class="container py-8">
        <div class="two-column">
          <div class="left">
            <h1 class="text-3xl lg:text-4xl xl:text-5xl font-bold leading-tight text-center lg:text-left mb-6">
              <span class="text-green font-black">显示眼镜</span>
            </h1>

            <p
              class="text-xl lg:text-2xl xl:text-3xl font-medium text-zinc-700 text-center lg:text-left leading-tight mb-6">
              看见重要的事物。
            </p>
          </div>

          <div class="right">
            <div class="relative">
              <img
                src="images/EvenRealities_G1.png?v=1757052450&t=12345"
                alt="Even Realities G1 Display Glasses"
                class="hero-glasses scale-x-neg-1" />
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Display Glasses Features -->
    <section class="section-padding">
      <div class="container">
        <div class="features-container">
          <!-- Mobile Layout -->
          <div class="features-mobile">
            <div class="feature-item">
              <img src="images/mentra-merge.png?v=1750409529" alt="Merge Proactive AI icon" class="feature-icon" />
              <div class="feature-content">
                <h3 class="feature-title">Merge</h3>
                <p class="feature-description">主动AI让你更聪明。</p>
              </div>
            </div>

            <div class="feature-item">
              <img
                src="images/captions_app_icon_5bf8807e-a407-40b7-9f78-0bc9283caa8d.png?v=1759588117"
                alt="Live captions CC icon"
                class="feature-icon" />
              <div class="feature-content">
                <h3 class="feature-title">Captions</h3>
                <p class="feature-description">现实生活中的字幕。</p>
              </div>
            </div>

            <div class="feature-item">
              <img
                src="images/dash_square.avif?v=1759588080"
                alt="Dash running and cycling stats icon"
                class="feature-icon" />
              <div class="feature-content">
                <h3 class="feature-title">Dash</h3>
                <p class="feature-description">实时跑步统计。</p>
              </div>
            </div>
          </div>

          <!-- Desktop Layout -->
          <div class="features-desktop">
            <div class="feature-item">
              <img src="images/mentra-merge.png?v=1750409529" alt="Merge Proactive AI icon" class="feature-icon" />
              <div class="feature-content">
                <h3 class="feature-title">Merge</h3>
                <p class="feature-description">主动AI让你更聪明。</p>
              </div>
            </div>

            <div class="feature-item">
              <img
                src="images/captions_app_icon_5bf8807e-a407-40b7-9f78-0bc9283caa8d.png?v=1759588117"
                alt="Live captions CC icon"
                class="feature-icon" />
              <div class="feature-content">
                <h3 class="feature-title">Captions</h3>
                <p class="feature-description">现实生活中的字幕。</p>
              </div>
            </div>

            <div class="feature-item">
              <img
                src="images/dash_square.avif?v=1759588080"
                alt="Dash running and cycling stats icon"
                class="feature-icon" />
              <div class="feature-content">
                <h3 class="feature-title">Dash</h3>
                <p class="feature-description">实时跑步统计。</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- <div class="lg:py-4"></div> -->

    <!-- Camera Glasses Hero -->
    <section>
      <div class="container py-8">
        <div class="two-column">
          <div class="left">
            <h1 class="text-3xl lg:text-4xl xl:text-5xl font-bold leading-tight text-center lg:text-left mb-6">
              <span class="text-green font-black">摄像眼镜</span>
            </h1>

            <p
              class="text-xl lg:text-2xl xl:text-3xl font-medium text-zinc-700 text-center lg:text-left leading-tight mb-6">
              将你的视野流式传输到应用和AI。
            </p>
          </div>

          <div class="right">
            <div class="relative">
              <img
                src="images/Non_Exploded_Glasses_1.png?v=1757174832"
                alt="Mentra Live Camera Glasses"
                class="hero-glasses rotate-neg-7" />
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Camera Glasses Apps -->
    <section class="section-padding">
      <div class="container">
        <div class="features-container">
          <!-- Mobile Layout -->
          <div class="features-mobile">
            <div class="feature-item">
              <img
                src="images/streamer_MentraOS_app_smart_glasses_icon_smol.png?v=1759587821"
                alt="Streamer app icon"
                class="feature-icon" />
              <div class="feature-content">
                <h3 class="feature-title">Streamer</h3>
                <p class="feature-description">随时随地直播。</p>
              </div>
            </div>

            <div class="feature-item">
              <img
                src="images/Mentra_Notes_App_icon_smol.png?v=1759587511"
                alt="AI Notes app icon"
                class="feature-icon" />
              <div class="feature-content">
                <h3 class="feature-title">AI Notes</h3>
                <p class="feature-description">自动记笔记。</p>
              </div>
            </div>

            <div class="feature-item">
              <img
                src="images/camera_app_square_MentraOS_smol.png?v=1759587769"
                alt="Camera app icon"
                class="feature-icon" />
              <div class="feature-content">
                <h3 class="feature-title">Camera</h3>
                <p class="feature-description">解放双手拍照和录像。</p>
              </div>
            </div>
          </div>

          <!-- Desktop Layout -->
          <div class="features-desktop">
            <div class="feature-item">
              <img
                src="images/streamer_MentraOS_app_smart_glasses_icon_smol.png?v=1759587821"
                alt="Streamer app icon"
                class="feature-icon" />
              <div class="feature-content">
                <h3 class="feature-title">Streamer</h3>
                <p class="feature-description">随时随地直播。</p>
              </div>
            </div>

            <div class="feature-item">
              <img
                src="images/Mentra_Notes_App_icon_smol.png?v=1759587511"
                alt="AI Notes app icon"
                class="feature-icon" />
              <div class="feature-content">
                <h3 class="feature-title">AI Notes</h3>
                <p class="feature-description">自动记笔记。</p>
              </div>
            </div>

            <div class="feature-item">
              <img
                src="images/camera_app_square_MentraOS_smol.png?v=1759587769"
                alt="Camera app icon"
                class="feature-icon" />
              <div class="feature-content">
                <h3 class="feature-title">Camera</h3>
                <p class="feature-description">解放双手拍照和录像。</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- OS Apps Showcase -->
    <section class="section-padding">
      <div class="container">
        <div class="text-center mb-2">
          <p
            class="text-3xl lg:text-4xl xl:text-5xl leading-relaxed font-medium"
            style="max-width: 900px; margin: 0 auto">
            在Mentra Store获取X、Merge、AI Notes等更多新应用。
          </p>
        </div>

        <div class="flex justify-center">
          <img
            src="images/Apps.png?v=1756151137"
            alt="Smart Glasses Apps Control - Desktop"
            class="hidden lg:block w-full h-auto" />
        </div>

        <div class="block lg:hidden mobile-full-width">
          <img
            src="images/Apps_Showcase.png?v=1757047421"
            alt="Smart Glasses Apps Control - Mobile"
            style="width: 80%; height: auto; margin: 0 auto; display: block" />
        </div>
      </div>
    </section>

    <!-- Download CTA -->
    <section class="bg-gradient-dark text-white section-padding">
      <div class="container">
        <div class="two-column">
          <div class="left">
            <h2 class="text-3xl lg:text-4xl xl:text-5xl font-bold leading-tight text-center lg:text-left mb-6">
              准备体验MentraOS了吗？
            </h2>

            <div class="app-badges">
              <div class="badge-row center">
                <a
                  href="https://apps.apple.com/us/app/mentra-the-smart-glasses-app/id6747363193"
                  target="_blank"
                  rel="noopener noreferrer">
                  <img src="images/livetype.svg?v=1758968728" alt="在App Store下载" class="app-badge" />
                </a>
                <a
                  href="https://play.google.com/store/apps/details?id=com.mentra.mentra"
                  target="_blank"
                  rel="noopener noreferrer">
                  <img
                    src="images/Google_Play_Store_badge_EN_svg.png?v=1758968730"
                    alt="在Google Play获取"
                    class="app-badge" />
                </a>
                <a href="https://github.com/Mentra-Community/MentraOS" target="_blank" rel="noopener noreferrer">
                  <img src="images/get-it-on-github.png?v=1759512657" alt="在GitHub获取" class="app-badge" />
                </a>
              </div>
            </div>
          </div>

          <div class="right">
            <div class="relative">
              <img src="images/mentra_os_mobile_app_store.png?v=1760480599" alt="MentraOS应用商店" class="hero-phone" />
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Multiple Glass Support -->
    <section class="section-padding">
      <div class="container">
        <div class="text-center mb-8">
          <h2 class="text-3xl lg:text-4xl font-bold mb-4">选择你偏好的智能眼镜硬件。</h2>
          <p class="text-xl lg:text-2xl text-zinc-700 leading-relaxed"></p>
        </div>

        <!-- Display Glasses Carousel -->
        <div class="mb-12">
          <h3 class="text-2xl font-bold text-center mb-6">显示眼镜</h3>
          <div class="carousel-container" id="display-carousel">
            <div class="carousel-track" id="display-track">
              <div class="carousel-item">
                <div class="text-center">
                  <img
                    src="images/EvenRealities_G1.png?v=1757052450"
                    alt="Even Realities G1"
                    class="hero-glasses mx-auto mb-4" />
                  <h4 class="text-m font-bold mb-2">Even Realities G1</h4>
                </div>
              </div>
              <div class="carousel-item">
                <div class="text-center">
                  <img
                    src="https://cdn.shopify.com/s/files/1/0747/3505/9196/files/Vuzix_v100.png?v=1757052359"
                    alt="VUZIX 100"
                    class="hero-glasses mx-auto mb-4" />
                  <h4 class="text-m font-bold mb-2">Vuzix 100</h4>
                </div>
              </div>
            </div>
            <div class="carousel-nav">
              <div class="carousel-dot active" onclick="showDisplaySlide(0)"></div>
              <div class="carousel-dot" onclick="showDisplaySlide(1)"></div>
            </div>
          </div>
        </div>

        <!-- Camera Glasses -->
        <div>
          <h3 class="text-2xl font-bold text-center mb-6">摄像眼镜</h3>
          <div class="text-center">
            <img
              src="images/Non_Exploded_Glasses_1.png?v=1757174832"
              alt="Mentra Live"
              class="hero-glasses mx-auto mb-4" />
            <h4 class="text-xl font-bold mb-2">Mentra Live</h4>
            <p class="text-zinc-700">使用先进摄像技术流式传输你的视角</p>
          </div>
        </div>
      </div>
    </section>

    <!-- Build Apps Section -->
    <!-- <section class="bg-gradient-light-green section-padding">
      <div class="container">
        <div class="two-column">
          <div class="left">
            <h2 class="text-3xl lg:text-4xl xl:text-5xl font-bold leading-tight text-center lg:text-left mb-6">
              MentraOS让你像开发网页应用一样构建智能眼镜应用。
            </h2>

            <p class="text-zinc-700 text-lg lg:text-xl font-medium leading-relaxed text-center lg:text-left mb-8">
              编写一个能在多种智能眼镜上运行的TypeScript应用。
            </p>

            <div class="text-center lg:text-left">
              <a href="https://console.mentra.glass/" target="_blank" rel="noopener noreferrer" class="cta-button">
                构建你自己的应用
              </a>
            </div>
          </div>

          <div class="right">
            <div class="relative">
              <img
                src="images/Build_Apps_Desktop.png?v=1756158366"
                alt="Developer building smart glasses applications"
                class="hero-phone"
                style="border-radius: 1rem; max-width: 400px" />
            </div>
          </div>
        </div>
      </div>
    </section> -->

    <!-- FAQ Section -->
    <section class="section-padding">
      <div class="container">
        <div class="two-column">
          <div class="left">
            <h2 class="text-3xl lg:text-4xl font-bold mb-8">常见问题</h2>

            <div class="faq-list">
              <div class="faq-item">
                <button class="faq-question" onclick="toggleFAQ(this)">
                  什么是MentraOS？
                  <span class="faq-icon">+</span>
                </button>
                <div class="faq-answer">
                  <p>
                    MentraOS是专为智能眼镜设计的开源操作系统。它为开发者提供构建应用的工具，并让用户能够访问不断增长的智能眼镜应用生态系统。
                  </p>
                </div>
              </div>

              <div class="faq-item">
                <button class="faq-question" onclick="toggleFAQ(this)">
                  哪些智能眼镜支持MentraOS？
                  <span class="faq-icon">+</span>
                </button>
                <div class="faq-answer">
                  <p>
                    MentraOS支持多种智能眼镜，包括用于显示的Even Realities G1、Vuzix Z100，以及用于摄像的Mentra
                    Live。我们正在持续为更多设备添加支持。
                  </p>
                </div>
              </div>

              <!-- <div class="faq-item"> -->
              <!-- <button class="faq-question" onclick="toggleFAQ(this)">
                  如何为MentraOS开发应用？
                  <span class="faq-icon">+</span>
                </button>
                <div class="faq-answer">
                  <p>
                    你可以使用TypeScript和熟悉的网页技术开发应用。访问我们在console.mentra.glass的开发者控制台，获取文档、工具和示例来开始开发。
                  </p>
                </div> -->
              <!-- </div> -->

              <div class="faq-item">
                <button class="faq-question" onclick="toggleFAQ(this)">
                  MentraOS免费使用吗？
                  <span class="faq-icon">+</span>
                </button>
                <div class="faq-answer">
                  <p>是的！MentraOS完全开源且免费使用。你可以从我们的GitHub仓库或应用商店下载。</p>
                </div>
              </div>

              <div class="faq-item">
                <button class="faq-question" onclick="toggleFAQ(this)">
                  有哪些可用的应用？
                  <span class="faq-icon">+</span>
                </button>
                <div class="faq-answer">
                  <p>
                    我们有Merge（主动AI）、Captions（实时字幕）、Dash（跑步统计）、Streamer（直播）、AI
                    Notes（自动笔记）和Camera（解放双手拍照）等应用。新应用正在定期增加。
                  </p>
                </div>
              </div>
            </div>
          </div>

          <div class="right">
            <div class="relative">
              <img src="images/mentra_os_mobile_app_store.png?v=1760480599" alt="MentraOS应用商店" class="hero-phone" />
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- App Download CTA -->
    <!-- <section class="bg-gradient-light-green section-padding">
      <div class="container text-center">
        <h2 class="text-3xl lg:text-4xl xl:text-5xl font-bold mb-6">立即下载MentraOS。</h2>

        <div class="app-badges justify-center mb-8">
          <div class="badge-row center">
            <a
              href="https://apps.apple.com/us/app/mentra-the-smart-glasses-app/id6747363193"
              target="_blank"
              rel="noopener noreferrer">
              <img src="images/livetype.svg?v=1758968728" alt="在App Store下载" class="app-badge" />
            </a>
            <a
              href="https://play.google.com/store/apps/details?id=com.mentra.mentra"
              target="_blank"
              rel="noopener noreferrer">
              <img
                src="images/Google_Play_Store_badge_EN_svg.png?v=1758968730"
                alt="在Google Play获取"
                class="app-badge" />
            </a>
            <a href="https://github.com/Mentra-Community/MentraOS" target="_blank" rel="noopener noreferrer">
              <img src="images/get-it-on-github.png?v=1759512657" alt="在GitHub获取" class="app-badge" />
            </a>
          </div>
        </div>

        <div class="flex justify-center">
          <img src="images/mentra_os_mobile_app_store.png?v=1760480599" alt="MentraOS应用商店" class="hero-phone" />
        </div>
      </div>
    </section> -->

    <!-- Mailing List CTA -->
    <!--
    <section class="bg-zinc-900 text-white section-padding">
        <div class="container">
            <div class="text-center mb-8">
                <h2 class="text-3xl lg:text-4xl font-bold mb-4">Stay up-to-date on all things smart glasses</h2>
                <p class="text-xl text-zinc-400">Get the latest news, updates, and developer resources delivered to your inbox.</p>
            </div>
            
            <div class="form-container">
                <form id="newsletter-form" onsubmit="handleNewsletterSubmit(event)">
                    <div class="flex flex-col gap-3">
                        <input type="email" id="email" name="email" placeholder="Enter your email address" class="form-input" required>
                        <button type="submit" class="form-button">Subscribe to Newsletter</button>
                    </div>
                    <div id="form-message" class="mt-4 text-center"></div>
                </form>
            </div>
        </div>
    </section>
    -->

    <script>
      // Display Glasses Carousel
      let currentDisplaySlide = 0

      function showDisplaySlide(index) {
        const track = document.getElementById("display-track")
        const dots = document.querySelectorAll("#display-carousel .carousel-dot")

        currentDisplaySlide = index
        track.style.transform = `translateX(-${index * 100}%)`

        dots.forEach((dot, i) => {
          dot.classList.toggle("active", i === index)
        })
      }

      // FAQ Toggle
      function toggleFAQ(button) {
        const answer = button.nextElementSibling
        const icon = button.querySelector(".faq-icon")

        const isOpen = answer.classList.contains("open")

        // Close all other FAQs
        document.querySelectorAll(".faq-answer").forEach((a) => a.classList.remove("open"))
        document.querySelectorAll(".faq-icon").forEach((i) => (i.textContent = "+"))

        // Toggle current FAQ
        if (!isOpen) {
          answer.classList.add("open")
          icon.textContent = "−"
        }
      }

      // Newsletter Form
      function handleNewsletterSubmit(event) {
        event.preventDefault()

        const email = document.getElementById("email").value
        const messageDiv = document.getElementById("form-message")

        // Simple validation
        if (!email || !email.includes("@")) {
          messageDiv.innerHTML = '<p style="color: #ef4444;">Please enter a valid email address.</p>'
          return
        }

        messageDiv.innerHTML =
          '<p style="color: #10b981;">Thank you for subscribing! You\'ll receive our newsletter soon.</p>'

        // Reset form
        document.getElementById("newsletter-form").reset()

        // In a real implementation, you would send the data to your newsletter service
        console.log("Newsletter subscription:", email)
      }

      // Auto-advance carousel every 5 seconds
      setInterval(() => {
        const nextSlide = (currentDisplaySlide + 1) % 2
        showDisplaySlide(nextSlide)
      }, 5000)
    </script>

    <!-- Footer with Address and ICP Filing Number -->
    <footer
      style="
        background-color: #f8f9fa;
        padding: 30px 0 20px;
        text-align: center;
        margin-top: 50px;
        border-top: 1px solid #e9ecef;
      ">
      <div class="container">
        <div style="margin-bottom: 20px">
          <p style="color: #6c757d; margin: 0 0 10px; font-size: 16px; line-height: 1.6">
            公司地址: 广东省深圳市宝安区新安街道 稻兴环球科创中心A座903
          </p>
        </div>
        <p style="color: #6c757d; margin: 0; font-size: 14px">
          2025 Copyright Mentra Labs, Inc. All rights reserved.
          <br />
          <a
            href="https://beian.miit.gov.cn/"
            target="_blank"
            rel="noopener noreferrer"
            style="color: #6c757d; text-decoration: none">
            粤ICP备2025487718号
          </a>
        </p>
      </div>
    </footer>
  </body>
</html>
